<template>
  <div class="image-item">
    <el-upload
    class="upload-demo"
    action="//upload.qiniu.com"
    accept="image/*"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-progress="onProgress"
    :on-success="onSuccess"
    :before-upload="beforeUpload"
    :on-error="onError"
    :data="qiniu"
    :show-file-list = "false"
    :file-list="fileList">
      <img class="logo-img" v-if="image" :src="image" />
      <div class="logo-img-holder" :class="{'progressing':progress}" v-if="!image"></div>
      <el-progress v-if="progress" :percentage="progress" class="upload-progress" :show-text="false"></el-progress>
      <div v-if="!progress && !image" class="upload-tip">点击上传</div>
    </el-upload>
  </div>
</template>
<style lang="scss">

$size: 120px;

.logo-img {
  width: $size;
  height: $size;
  line-height: $size;
  border-radius: $size;
  cursor: pointer;
  box-shadow: 0 0 2px grey;
}

.logo-img-holder {
  width: $size;
  height: $size;
  line-height: $size;
  border-radius: $size;
  background-color: #20a0ff;
  cursor: pointer;

  &.progressing {
    background-color: white;
    box-shadow: 0 0 2px grey;
  }
}

.image-item {
  .upload-progress{
    position: absolute;
    top:40%;
    width: $size - 20;
    margin-left: 10px;
  }

  .upload-tip {
    position: absolute;
    top:30%;
    width: $size;
    color: white;
  }
}
</style>
<script>
  import { Upload, Progress } from 'element-ui'
  import N from '../lib/notification'
  import { mapState } from 'vuex'
  import axios from 'axios'
  import env from '../config/common'

  export default {
    props: {
      defaultImage: {
        type: String
      }
    },
    components: {
      [Upload.name]: Upload,
      [Progress.name]: Progress
    },
    methods: {
      handleRemove (file, fileList) {
        console.log(file, fileList)
      },
      handlePreview (file) {
        console.log(file)
      },
      onProgress (event, file, fileList) {
        this.progress = event.percent
      },
      onSuccess (response, file, fileList) {
        this.image = this.qiniu.domain + '/' + response.key
        this.progress = null
      },
      beforeUpload (file) {
        this.progress = 0
      },
      onError (err, file, fileList) {
        N.notify('error', '上传出错, 请检查文件类型或者网络状态')
        console.log(err)
      }
    },
    beforeMount () {
      const tokenApi = env.CRM_API_HOST + '/admin/' + this.token + '/upload_token'
      axios.get(tokenApi).then((response) => {
        if (response.data.errcode === 0) {
          this.qiniu = Object.assign(this.qiniu, response.data.results)
        }
      })
    },
    mounted () {
    },
    watch: {
      image (val) {
        this.$emit('input', val)
      },
      defaultImage (val) {
        this.image = val
      }
    },
    computed: {
      ...mapState({
        token: state => state.auth.user.token
      })
    },
    data () {
      return {
        fileList: [
        ],
        style: '',
        image: null,
        progress: null,
        qiniu: {
          token: null,
          domain: null
        }
      }
    }
  }
</script>
